<template>
    <div class='reportWeb'>
        <div class="titleBox">
            六大产业集群人才抽样调查统计表
        </div>
        <div class="center">
            <!-- <img style="width: 100%;z-index: -1;" src="../../static/webTop.png" alt=""> -->
            <view class="formBox">
                <view class="page-form">
                    <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-width='120px'>

                            <uni-forms-item label="地区选择" required name="region">
                                <uni-data-select v-model="valiFormData.region" :localdata="regionList" :clear="false">
                                </uni-data-select>
                            </uni-forms-item>
                            <uni-forms-item label="产业类别" required name="category">
                                <uni-data-select v-model="valiFormData.category" :localdata="categoryList" :clear="false">
                                </uni-data-select>
                            </uni-forms-item>
                    </uni-forms>
                    <!-- <view class="textAgg" @click="showAgreement">
                我已阅读并同意《用户协议》和《隐私政策》
            </view> -->
                    <button style="background-color: #0E2966;width: 200px;margin-top: 20px;" type="primary" @click="submit('valiForm')"
                        class='btn'>立即上报</button>
                </view>
            </view>

        </div>
        <div class="bottomBox">
            <div>内蒙古·呼和浩特市人社局</div>
        </div>
        <!-- <cc-bottom :isFixed='false' /> -->
        <!-- <popup ref="affirm" @getdata="getdata" title="用户隐私协议" width="600rpx" :isShowCancel="false" :top="0">
        <template #body>
          <view class="affirmBody"> 
			  <scroll-view style="height:100%" scroll-y="true"> <view v-html="text" class="content"></view></scroll-view>
			 
		  </view>
        </template>
      </popup> -->
    </div>
</template>

<script>
import ldSelect from '../../components/ld-select/ld-select.vue' //补存信息
import ccBottom from '../../components/cc-bottom/cc-bottom.vue' //补存信息
import Api from '@/utils/request/api.js'
import popup from "@/components/popup.vue";
import { text } from './agreement.js'
export default {
    components: {
        ldSelect,
        ccBottom,
        popup
    },
    data() {

        function validateNumFunction(rule, value, data, callback) {
            var numReg = /^[0-9]*$/
            var numRe = new RegExp(numReg)
            if (!numRe.test(value)) {
                callback('请输入整数')
            }
            if (Number(value) > 1000000) {
                callback('人数不可大于1000000')
            }
        }

        return {
            text: text,
            valiFormData: {},
            rules: {
                region: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择地区'
                    }]
                },
                category: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择产业类别'
                    }]
                },
                name: {
                    rules: [{
                        required: true,
                        errorMessage: '请填写企业名称'
                    }]
                },
                totalNumberOfPeople: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfPeopleBelowJuniorCollege: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfSpecialists: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfUndergraduateStudents: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfMaster: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfPhds: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfJuniorWorkers: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfIntermediateWorkers: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfSeniorWorkers: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfTechnicians: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfSeniorTechnicians: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfJuniorEmployeesWithProfessionalTitles: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfIntermediatePersonnelWithProfessionalTitles: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfViceSeniorOfficersWithProfessionalTitles: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },
                numberOfPeopleWithHighProfessionalTitles: {
                    rules: [
                        { required: true, errorMessage: '请填写人数', },
                        { validateFunction: validateNumFunction },]
                },


            },
            sexs: [{
                text: '男',
                value: '0'
            }, {
                text: '女',
                value: '1'
            }],
            close: [{
                text: '是',
                value: 1
            }, {
                text: '否',
                value: 0
            }],
            flagList: [{
                text: '用户注册',
                value: 1
            }, {
                text: '工作人员注册',
                value: 2
            }],
            regionList: [{
                value: '150102',
                text: '新城区',
            }, {
                value: '150103',
                text: '回民区',
            }, {
                value: '150104',
                text: '玉泉区',
            }, {
                value: '150105',
                text: '赛罕区',
            }, {
                value: '150121',
                text: '土默特左旗',
            }, {
                value: '150122',
                text: '托克托县',
            }, {
                value: '150123',
                text: '和林格尔县',
            }, {
                value: '150124',
                text: '清水河县',
            }, {
                value: '150125',
                text: '武川县',
            }], //地区选择
            categoryList: [{
                value: '1',
                text: '绿色农畜产品加工产业集群',
            }, {
                value: '2',
                text: '清洁能源产业集群',
            }, {
                value: '3',
                text: '现代化工产业集群',
            }, {
                value: '4',
                text: '新材料和现代装备制造产业集群',
            }, {
                value: '5',
                text: '生物医药产业集群',
            }, {
                value: '6',
                text: '电子信息技术产业集群',
            }], //产业类别
            setnum: 0
        }
    },
    onLoad(op) {

        // let that = this
        // // 回显
        // this.getDic()
        // setTimeout(function () {
        //     if (op.type == '0') {
        //         that.valiFormData.flag = 1
        //     } else {
        //         that.valiFormData.flag = 2
        //     }

        //     that.chooseFlag(that.valiFormData.flag)
        // }, 1000)


        // console.log(that.valiFormData)
    },
    onReady() {
        // 需要在onReady中设置规则
        this.$refs.valiForm.setRules(this.rules)
    },
    methods: {
        setNum(e) {
            this.setnum = e.detail.value ? Number(e.detail.value) : 0
            console.log(e.detail.value);
        },
        getdata() {
            this.$refs.affirm.close();
        },
        showAgreement() {
            this.$refs.affirm.open();
        },
        sexChange(e) {
            this.valiFormData.sex = e.target.value
        },
        totalNumberOfPeopleChange(e, key) {
            console.log(e, key);

            var numReg = /^[0-9]*$/
            var numRe = new RegExp(numReg)


            if (!numRe.test(e)) {
                this.valiFormData[key] = ''
            }
            console.log(Number(e) > 1000000);
            if (Number(e) > 1000000) {
                this.valiFormData[key] = 1000000
                this.valiFormData = JSON.parse(JSON.stringify(this.valiFormData))
                console.log(this.valiFormData);
                this.$forceUpdate()
            }
            this.valiFormData = {
                ...this.valiFormData,
                // sex: '1'
            }
        },
        submit(ref) {
            console.log(this.valiFormData);
            this.$refs[ref].validate().then(res => {
                console.log('success', res);
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                Api.addInfo(res).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        uni.showToast({
                            title: `上报成功`
                        })
                        this.valiFormData = {}
                        // setTimeout(() => {
                        //     uni.navigateBack()
                        // }, 1000);
                        // uni.navigateTo({
                        // 	url:'/pages/login/login'
                        // })
                        uni.hideLoading()
                    } else {
                        uni.hideLoading()
                    }
                })

            }).catch(err => {
                console.log('err', err);
            })
        },
    }

}
</script>

<style scoped lang="scss">
.reportWeb {
    background-color: #EFF5F9;

    .titleBox {
        width: 100%;
        background-color: #3662EC;
        padding: 20px;
        text-align: center;
        color: #fff;
        font-size: 30px;
    }

    .center {
        width: 1440px;
        margin: 0 auto;
    }

    .report_title {
        // margin: 5px;
        // padding: 5px;
        margin-bottom: 30rpx;

        .report_line {
            width: 8rpx;
            height: 36rpx;
            margin-right: 10px;
            border-radius: 10px;
            background-color: #0E2966;
        }

        font-size: 30rpx;
        display: flex;
        color: #0E2966;
        border-bottom: #0E2966 solid 1px;
        padding-bottom: 10px;
        margin: 20px 0;
        font-weight: 600;
    }
    
    /deep/uni-text{
        text-align: center !important;
    }
    /deep/.uni-forms-item__label{
        text-align: end !important;
        justify-content:end !important
    }

    .uni-forms-item {
        // float: left;
        width: 33%;
        padding-right: 20px;
    }

    .formBox {

        // padding-top: 35vw;
        // margin-top: 50rpx;
        // background-color: #fff;
        z-index: 10;
    }

    .page-form {
        padding: 20px;
        // margin-top: 50rpx;
        background-color: #fff;
        z-index: 10;
    }

    .affirmBody {
        height: 600rpx;
        /* overflow: auto; */
        padding: 22rpx;
    }

    /* .affirmBody .content{
		overflow: auto;
		height: 100%;
	} */
    .textAgg {

        font-family: PingFang SC Regular;
        font-size: 26rpx;
        font-weight: normal;
        line-height: 80rpx;
        letter-spacing: 0px;
        color: #969696;
        text-align: center;
        margin-top: 30rpx;
    }

    .textphone {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: normal;
        line-height: 60rpx;
        letter-spacing: 0px;
        color: rgba(230, 162, 50, 1);
        margin-top: -15rpx;
    }

    .page h1 {
        font-size: 40rpx;
        font-weight: normal;
        padding: 20rpx;
    }

    .btn {
        font-size: 30rpx;
    }
    .bottomBox{
        text-align: center;
        padding: 40px ;
        color: #0E2966;
        :nth-child(1){
            font-size: 18px;
            font-weight: 600;
        }
        :nth-child(2){
            font-size: 14px;
            font-weight: 600;
            margin-top: 10px;
        }
    }
}
</style>
